<div id="root">

    <qf-nav-bar title="用户创建"></qf-nav-bar>

    <h1>用户创建</h1>
    <qf-table @submit="submitFn"></qf-table>

    <h1>loading组件1</h1>
    <qf-loading1 :state="loading1State"></qf-loading1>
    <button @click="loading1State=true">显示</button>
    <button @click="loading1State=false">隐藏</button>

    <h1>loading组件2</h1>
    <qf-loading2 :state="loading2State" @close="()=>loading2State=false"></qf-loading2>
    <button @click="loading2State=true">显示2</button>


    <h1>Dialog对话框</h1>
    <!-- <qf-dialog :visible="dialogState" @close="data => dialogState=false" title="用户标题" content="<input type='text'/>"></qf-dialog> -->
    <qf-dialog :visible.sync="dialogState"  title="用户标题" content="<input type='text'/>"></qf-dialog>
    <button @click="dialogState=true">显示对话框</button>

    <h1>分页组件page</h1>
    <qf-page :total="10" :page-size="2" @click-page="changePageFn"></qf-page>


    <h1>表格</h1>
    <qqf-table :columns="usersColumns" :data="usersData"></qqf-table>
    <br>
    <qqf-table :columns="goodsColumns" :data="goodsData"></qqf-table>></qqf-table>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./qfui.js"></script>
<link rel="stylesheet" href="./qfui.css">
<script>
const vm = new Vue({
    el: "#root",
    data: {
        loading1State:false,
        loading2State:false,
        dialogState:false,

        //用户数据
        usersColumns:[
            {title:"编号",key:"id"},
            {title:"姓名",key:"uname"},
            {title:"性别",key:"sex"},
            {
                title:"姓名1",
                key:"sex2",
                render:(row) =>
                ` <b style="color:red">${row.sex2 === 1 ? "男" : "女"}</b>`,
            },
        ],
        usersData:[
            {id:1,uname:"李某"},
            {id:1,uname:"绿某"},
        ],
        //商品表格
        goodsColumns:[
            {title:"编号",key:"id"},
            {title:"商品名称",key:"title"},
            {title:"价格",key:"price"},
        ],
        goodsData:[
            {id:1,title:"商品1",price:1.11},
            {id:1,title:"商品2",price:2.22},
            {id:1,title:"商品3",price:3.33},
        ],
    },
    methods:{
        submitFn(formData){
            alert('伪代码')
            console.log('表单数据:',formData)
        },
        changePageFn(pageNum){
            console.log('你点击分页了',pageNum)
        }
    }
})
</script>